<template>
	<div>
		<div class="am-g">
			<!-- LOGO -->
			<div class="am-u-sm-12 am-text-center" style="z-index:10000;">
				<div class="photo" @click="upload">
					<!-- <i class="aui-iconfont aui-icon-my" v-if="info.user_pic!=''?false:true"></i> -->
					<img :src="info.user_pic!=''?info.user_pic:'/static/themes/img/photo.jpeg'" alt="" id="portrait">
				</div>
				<input type="file" name="photo" id="photo" style="display:none;">
			</div>
			<!-- 登陆框 -->
			<div class="am-u-sm-11 am-u-sm-centered">
				<!-- .prevent 事件的修饰符，这个是阻止表单提交-->
			<form class="am-form" action="" method="post" v-on:submit.prevent="infoAct">
			  <fieldset class="myapp-login-form am-form-set">
				<div class="am-form-group am-form-icon">
					<i class="am-icon-user"></i>
					<input type="text" v-model="info.user_name" disabled class="myapp-login-input-text am-form-field" placeholder="请输入账号" required>
				</div>
			    <div class="am-form-group am-form-icon">
					<i class="am-icon-lock"></i>
					<input type="password" class="myapp-login-input-text am-form-field" placeholder="请输入密码(至少6个字符)">
				</div>
				<div class="am-form-group am-form-icon">
					<i class="am-icon-lock"></i>
					<input type="password" class="myapp-login-input-text am-form-field" placeholder="确认密码(至少6个字符)">
				</div>
				<div class="am-form-group am-form-icon">
					<i class="am-icon-user"></i>
					<input type="text" v-model="info.user_email" class="myapp-login-input-text am-form-field" placeholder="请输入邮箱" required>
				</div>
				<div class="am-form-group am-form-icon">
					<i class="am-icon-user"></i>
					<input type="text" v-model="info.user_phone" class="myapp-login-input-text am-form-field" placeholder="请输入手机号" required>
				</div>

				<div class="aui-list-item-inner">
	                <div class="aui-list-item-label" style="float:left;">
	                    性别：
	                </div>
	                <div class="aui-list-item-input" style="float:left;">
	                    <!-- <label><input class="aui-radio" type="radio" name="sex" value="1" v-model="info.user_sex"> 男</label>
	                    <label><input class="aui-radio" type="radio" name="sex" value="0" v-model="info.user_sex"> 女</label> -->

	                    <label><input class="aui-radio" type="radio" name="sex" value="1" :checked="info.user_sex==1"> 男</label>
	                    <label><input class="aui-radio" type="radio" name="sex" value="0" :checked="info.user_sex==0"> 女</label>
	                </div>
	            </div>

			  </fieldset>
			  <button type="submit" class="myapp-login-form-submit am-btn am-btn-primary am-btn-block ">提 交</button>
			</form>
			</div>

		</div>
	</div>
</template>

<script>
	export default{
		name:'myinfo',
		components:{},	// 再加 子组件
		data(){
			return {
				
			};
		},
		// 方法
		created(){
		},
		mounted(){
			// 插件调用代码，自己写的脚本代码
			this.yulan()
		},
		// 计算属性
		computed:{
			// 写函数
			info(){
				let user = this.$cookie.get('user');
				user = JSON.parse(user);
				console.log(user)
				return user;
			}
		},
		methods:{
			// 写事件函数
			infoAct(){
				// 提交数据（组件不写异步操作）
				let info = {
					user:this.info,
					router:this.$router,	// vue的路由对象
					alert:this.$alert
				}
				// console.log(info)
				// 这里是调用控制器的方法，去写业务判断
				// 这句，是调用中间件 my.js 的方法
				this.$store.dispatch('actInfo',info)
			},
			upload(){
				// jq模拟点击
				$('#photo').trigger('click');
			},
			yulan(){
				var _this = this;
				$('#photo').on('change',function(){
					var imgFile = this.files[0];
					var fr = new FileReader();
                    fr.onload = function () {
                    	// fr.result  是base64文本
                    	// 显示预览的图片
                        $('#portrait').attr('src',fr.result);
                        // 给info增加头像地址
						_this.info.photo = imgFile;
                    };
                    fr.readAsDataURL(imgFile);

				});
			}
		}
	}
</script>

<style>
	.am-btn{
		font-size: 0.7rem;
	}
	.photo{
		width: 60px;
		height: 60px;
		margin: 20px auto 10px;
		text-align: center;
		border: 1px solid #ccc;
		border-radius: 50%;
		overflow: hidden;
	}
	.photo i{
		font-size: 40px;
	}
	.am-g{
		margin-bottom: 100px;
	}
	.am-form-group{
		margin-bottom: 1rem;
	}
</style>